<template>
  <f7-page class="main-bg-color">
    <div class="top-box">
      <div class="top-header">
        <h1>当前级别 {{positionInfo.level | levelFilter}}</h1>
        <img v-if="$store.getters.userInfo.user.static_level" :src="require(`../../assets/level${$store.getters.userInfo.user.static_level}.png`)" alt="">

      </div>
      <p class="top-p">持仓本金{{positionInfo.ben_jin || '0.00'}}<img src="../../assets/cc_002.png" alt=""> 最快出仓还剩{{positionInfo.time || 0}}天</p>

      <div class="chicang-total-box">
        <p>当前持仓总额</p>
        <div class="total">
          <h1>{{positionInfo.total || 0}}</h1>
          <img src="../../assets/cc_002.png" alt="">
        </div>
      </div>
    </div>
    <div class="page-padding">


      <div class="shouyi-flex">
        <div>
          <p>昨日收益</p>
          <h2><strong>+</strong>{{positionInfo.yesterday_static || 0}} <img src="../../assets/cc_002.png" alt=""></h2>
        </div>
        <div>
          <p>累计收益</p>
          <h2><strong>+</strong>{{positionInfo.static || 0}} <img src="../../assets/cc_002.png" alt=""></h2>
        </div>
      </div>
    </div>
    <f7-list>
      <f7-list-item title="持仓列表" :media="require('../../assets/cc_005.png')" link="/position-list/"></f7-list-item>
      <f7-list-item title="收益明细" :media="require('../../assets/cc_006.png')" link="/revenue-breakdown/"></f7-list-item>
      <f7-list-item title="打款记录" :media="require('../../assets/cc_007.png')" link="/payment-record/"></f7-list-item>
    </f7-list>
    <div class="content-padding margin-t30 margin-b30">
      <f7-button fill @click="releaseModal = true">发布交易</f7-button>
    </div>

    <custom-modal v-model="releaseModal" close-btn-color="#0C182D" back-color="linear-gradient(90deg,rgba(72,166,199,1),rgba(87,225,255,1),rgba(72,166,199,1))">
      <div class="release-box">
        <h2>发布交易</h2>
        <p>收益积分余额：{{$store.getters.userInfo.money.shouyi_f}}</p>
        <input type="number" placeholder="请输入金额" v-model="coin">
        <p class="tips-p">300起发布100的倍数</p>
        <f7-button color="black" fill @click="handleRelease">确定</f7-button>
      </div>
    </custom-modal>
  </f7-page>
</template>

<script>
  import { positions, orderSell } from "../../api/position";

  export default {
    name: "open-positions",
    data() {
      return {
        releaseModal: false,
        positionInfo: {},
        coin: ''
      }
    },
    filters: {
      levelFilter(level) {
        return level === '1' ? '银牌' : level === '2' ? '金牌' : '钻石'
      }
    },
    methods: {
      init() {
        positions().then(res => {
          this.positionInfo = res.data;
        })
      },
      handleRelease() {
        orderSell({coin: this.coin}).then(() => {
          this.$store.dispatch('GetInfo');
          this.releaseModal = false;
          this.coin = '';
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .main-bg-color {
    /*background: $mainBg url("../../assets/cc-bg.png") no-repeat center top;
    background-size: 100% auto!important;*/
  }
  .top-box {
    /*height: 400px;*/
    padding: 20px 30px 0;
    background: $mainBg url("../../assets/cc-bg.png") no-repeat center top;
    background-size: 100% auto!important;
  }
  .page-padding {
    padding: 0 30px 30px;
  }
  .top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 50px;
    h1 {
      font-size: 50px;
      color: #0C182D;
    }
    img {
      width: 83px;

    }
  }
  .top-p {
    display: flex;
    align-items: center;
    margin-top: 20px;
    font-size: 25px;
    color: $fontColor;
    img {
      width: 19px;
      margin-right: 20px;
    }
  }
  .chicang-total-box {
    margin-top: 50px;
    height: 280px;
    background:linear-gradient(123deg,rgba(37,208,218,1),rgba(79,126,230,1));
    border-radius:23px;
    padding: 39px;
    box-sizing: border-box;
    color: $fontColor;
    p {
      font-size: 28px;
    }
    .total {
      display: flex;
      align-items: center;
      justify-content: center;
      color: $fontColor;
      h1 {
        font-size: 110px;
        letter-spacing: -10px;
      }
      img {
        width: 84px;
        margin-left: 30px;
      }
    }
  }
  .shouyi-flex {
    display: flex;
    margin: 10px -5px;
    color: $fontColor;
    > div {
      background:linear-gradient(90deg,rgba(72,166,199,1),rgba(87,225,255,1),rgba(72,166,199,1));
      border-radius:23px;
      flex: 1;
      padding: 30px 0;
      text-align: center;
      margin: 0 5px;
      p {
        font-size: 24px;
      }
      img {
        width: 30px;
        margin-left: 10px;
      }
      h2 {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 45px;
        letter-spacing: -2px;
        strong {
          font-size: 35px;
        }
      }
    }
  }
  .release-box {
    color: $fontColor;
    h2 {
      text-align: center;
      font-size: 26px;
      padding-bottom: 10px;
    }
    p {
      padding: 10px 0;
      font-size: 24px;
    }
    input {
      height: 80px;
      background: $mainBg;
      width: 100%;
      padding: 0 30px;
      border-radius: $radius;
      font-size: 24px;
      color: $mainColor;
    }
    .tips-p {
      font-size: 15px;
      text-align: right;
      padding: 5px 0;
    }
    .button {
      height: 80px;
      background: $mainBg;
      line-height: 80px;
      color: $mainColor;
      margin-top: 60px;
    }
  }
  input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
    color: $mainColor;
  }
  input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
    color: $mainColor;
  }
  input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
    color: $mainColor;
  }
  input:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
    color: $mainColor;
  }
</style>